<template>
  <div>
    <driftingSnow ref="driftingSnow"></driftingSnow>
    <!-- class="animate__animated animate__flip animate__repeat-3" -->
    <springPetal ref="springPetal"></springPetal>

    <div class="login animate__animated animate__backInLeft">
      <el-card class="box-card" style="background: rgba(255, 255, 255, 0.7)">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabsClick">
          <el-tab-pane label="登录" name="login">
            <el-form
              ref="loginForm"
              :model="loginForm"
              status-icon
              :rules="loginFormRules"
              label-width="80px"
              class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="username">
                <el-input style="opacity: 0.7" v-model="loginForm.username" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  style="opacity: 0.7"
                  v-model="loginForm.password"
                  type="password"
                  autocomplete="off"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="loginSubmit"
                >
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="second">
            <el-form
              ref="signUpForm"
              :model="signUpForm"
              status-icon
              :rules="signUpFormRules"
              label-width="80px"
              class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="username">
                <el-input style="opacity: 0.7" v-model="signUpForm.username" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  style="opacity: 0.7"
                  v-model="signUpForm.password"
                  type="password"
                  autocomplete="off"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="signUpFormSubmit"
                >
                  注册
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import springPetal from '@/components/springPetal.vue'; // 春天
import driftingSnow from '@/components/driftingSnow.vue'; // 飘雪
import { signup, login } from '@/api/home.js'
export default {
  components: {
    springPetal,
    driftingSnow
  },
  data () {
    return {
      activeName: 'login',
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ]
      },

      signUpForm: {
        username: '',
        password: ''
      },
      signUpFormRules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ]
      }
    };
  },
  mounted () {
    // this.$refs.driftingSnow.showFn();
  },
  methods: {
    // 切换
    tabsClick (tab) {
      console.log(tab.name)
    },
    //登录
    loginSubmit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          login(this.loginForm).then(res => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '登录成功！'
              })
              sessionStorage.setItem('userId', res.data)
              sessionStorage.setItem('username', this.loginForm.username)
              this.$router.push('/nav/we')
            }
          })
        }
      })
    },
    //注册
    signUpFormSubmit () {
      this.$refs.signUpForm.validate(valid => {
        if (valid) {
          signup(this.signUpForm).then(res => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '注册成功！请登录！'
              })
              this.activeName = 'login'
            }
            this.signUpForm.username = ''
            this.signUpForm.password = ''
          })
        }
      })
    }
  }
};
</script>

<style scoped>
.login {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 400px;
}
</style>
